<template>
  <div class="friend">
    <h3 style="margin-left: 2%" class="apply">友链申请</h3>
    <div style="margin-left: 2%;background-color: white; margin-right: 17%;border-radius:5px;padding: 5px">
        <div style="margin-left: 1%;font-family: Georgia, serif;margin-top: -2%">
            <h4>申请格式</h4>
            <span>小站名称:lazyzw个人博客网站</span><br>
            <!-- <span>小站地址:https://www.wygandwdn.cn/</span><br> -->
            <!-- <span>小站描述:{{selfInfo.motto}}</span><br>
            <span>小站头像:{{selfInfo.avatar}}</span> -->
            <h4>申请方法</h4>
            <!-- <span>互换友链可以在留言板留下你的网站信息,格式如上,留言后两天内会处理完毕,如有超过两天未处理可以直接联系我:2287782667(QQ)</span><br>
            <span>感谢各位大佬捧场</span><br> -->
            <span>该功能暂未开发</span>
        </div>
    </div>
    <h3 style="margin-left: 2%" class="apply">我的朋友们</h3>
    <div style="display: flex;flex-wrap: wrap;">
        <div v-for="(site, index) in sites" :key="index" class="url">
            <a :href="site.url" target="_blank">
                <div class="friend-info">
                    <div>
                        <img :src="site.avatar" style="border-radius:5px 5px 0px 0px; width: 120px; height: 150px">
                    </div>
                    <div style="text-align: center;margin-top: 1%;color: #333">
                        <span>{{site.blogName}}</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      sites: [],
      selfInfo: []
    }
  },
  metaInfo: {
    title: '朋友圈',
    meta: [{
      name: 'keywords',
      content: 'lazyzw,Java,Redis,IT,网络,操作系统,leetcode,个人网站,博客网站'
    },
    {
      name: 'description',
      content: 'lazyzw个人博客网站,热爱编程的学习者,Java后端技术分享,算法知识分享'
    }]
  },
  methods: {
    next () {
      if (this.active++ > 2) this.active = 0
    },
    getSite () {
      this.$axios.get('/view/site/getAllSite').then(response => {
        this.$set(this, 'sites', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    getSelfInfo () {
      this.$axios.get('/view/authorInfo/getInfo', {
        params: {
          id: 2
        }
      }).then(response => {
        this.$set(this, 'selfInfo', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    }
  },
  created () {
    this.getSite()
    this.getSelfInfo()
  }
}
</script>

<style lang="less" scoped>
.friend{
    margin-top: 5%;
    margin-left: 25%;
    width: 60%;
    margin-right: 20%;
}
.friend-info{
    display: inline-block;
    background-color: white;
    border-radius: 5px;
    height: 180px;
}
.url{
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 3%;
}
.apply{
    border-left: 3px solid #F56C6C;
    padding-left: 5px;
    cursor: pointer;
}
.span{
  padding: 2px;
}
</style>
